Ext.define('AM.view.panel.DetailPanel1' ,{
    extend: 'Ext.form.Panel',
    alias: 'widget.detailpanel1',
    id: 'detailpanel1',
    bodyPadding: '2px,2px,2px,2px',
    autoScroll: true,
    title: 'Sumar',
    store: 'StoreDetail',
    collapsible: true,
    
    initComponent: function() {
    	this.items= [{xtype:'detail'},
    	             {xtype:'luni',hidden : true,
    	             },{
    	                 xtype: 'datefield',
    	                 id: 'from',
    	                 action: 'from',
    	                 fieldLabel: 'From',
    	                 labelWidth:30,
    	                 width:130,
    	                 format : 'd/m/Y',
    	                 hidden : true
    	             },{
    	                 xtype: 'datefield',
    	                 id: 'to',
    	                 action: 'to',
    	                 fieldLabel: 'To',
    	                 labelWidth:30,
    	                 width:130,
    	                 format : 'd/m/Y',
    	                 hidden : true
    	                 /*listeners: {
    	                     select: function(a,b,c) {
    	                         //fn: function(df) {
    	                             // this prevents the change event to fire and all is well.
    	                             //df.startValue = df.getValue();
    	                             //this.startDateFieldEventHandler.createDelegate( this )();
    	                        	 //console.log(a);
    	                        	 //console.log(b);
    	                        	 
    	                        	
    	                         },
    	                         //scope: this
    	                     }*/
    	               //  }  
    	             },{
    	                     xtype: 'dataview',
    	                     store: 'StoreDetail',
    	                     id:'dataview',
    	                     tpl  : Ext.create('Ext.XTemplate',
    	                     		 '<tpl for=".">',
    	                             '<p><b> Suma disponibilă: <font color="blue">{s}</font></b></p>',
    	                             '<p><b> Venituri: <font color="green">{v}</font></b></p>',
    	                             '<p><b> Cheltuieli: <font color="red">{c}</font></b></p>',
    	                             '<p><b> Zeciuiala totala: <font color="teal">{zt}</font></b></p>',
    	                             '<p><b> Zeciuiala achitata: <font color="teal">{z}</font></b></p>',
    	                             '<p><b> Ramas: <font color="purple">{r}</font></b></p>',
//    	                             '<p><a href="#"> Details </a></p>',
    	                             '</tpl>'
    	                      ),listeners: {
    	                         	containerclick: function (el, objModel, node) {
    	                     		  console.log('este');
    	                     		}
    	                     }
    	                   }    	             
        ],
        /*this.tbar= [{
        	//xtype:'detail',
            /*text: 'Apply',
            listeners: {
                click: function() {
                	console.log('este');
                }
            }*/
        //}],
        
        this.callParent();
    },   
    myFunction: function(){
        console.log('test');
    }
});